<template>
	<view :class="['input-number', zClass]">
		<text class="text" @click="decrease">-</text>
		<input class="input" :type="type" @blur="onInput" @confirm="onInput" v-model="val"/>
		<text class="text" @click="increase">+</text>
	</view>
</template>

<script>
	export default{
		props: {
			'zClass':{type:String},
			'type':{type:String, default:'digit'},
			'value':{type:Number, default:0},
			'step':{type:Number, default:1}
		},
		data(){
			return{
				val:this.value
			}
		},
		methods:{
			checkNumber(val){
				if(val<0)val = 0
				this.val = val || 0
				this.$emit('input', this.val)
			},
			onInput(e){
				this.checkNumber(e.target.value)
			},
			increase(){
				this.checkNumber(this.val+this.step)
			},
			decrease(){
				this.checkNumber(this.val-this.step)
			}
		}
	}
</script>

<style lang="scss">
	.input-number{
		display: flex;
		margin-right: 1upx;
		.text, .input{
			height: $form-cell-min-height;
			text-align: center;
			border:solid 1upx $border-color;
			/* #ifdef H5 */
			margin-right: -1px;
			/* #endif */
			/* #ifndef H5 */
			margin-right: -1upx;
			/* #endif */
		}
		.text{
			width: $form-cell-min-height;
			line-height: $form-cell-min-height;
		}
		.input{
			width: $form-cell-min-height*2;
			padding: 0;
		}
	}
</style>
